<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">档案备案-出租经营归档</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">租户信息</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top">
                <el-form-item label="承租人:" style="width: 30%" prop="czr ">
                    <el-input v-model="projectdetail.czr" placeholder="请输入承租人" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="承租人联系方式:" style="width: 30%" prop="czrlxfs">
                    <el-input v-model="projectdetail.czrlxfs" placeholder="请输入承租人联系方式"
                        class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="证件名称:" style="width: 30%" prop="zjmc">
                    <el-input v-model="projectdetail.zjmc" placeholder="请输入证件名称" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="证件号码:" style="width: 30%" prop="zjhm">
                    <el-input v-model="projectdetail.zjhm" placeholder="请输入证件号码" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="联系地址:" style="width: 30%" prop="lxdz ">
                    <el-input v-model="projectdetail.lxdz" placeholder="请输入联系地址" class="search-input" ></el-input>
                </el-form-item>
            </el-form>
            <div class="addtitle">合同信息</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top">
                <el-form-item label="合同编号:" style="width: 30%" prop="qdsj">
                    <el-input v-model="projectdetail.htbh" placeholder="请输入编号" class="search-input" >
                    </el-input>
                </el-form-item>
                <!-- :picker-options="pickerOptionstart" -->
                <el-form-item label="合同签订日期:" style="width: 30%" prop="qdsj">
                    <el-date-picker type="date" placeholder="选择合同签订时间" v-model="projectdetail.qdsj"
                        style="width: 100%" value-format="yyyy-MM-dd"  ></el-date-picker>
                </el-form-item>
                <el-form-item label="合同起始日期:" style="width: 30%" prop="zlqssj ">
                    <el-date-picker type="date" placeholder="选择合同起始日期" v-model="projectdetail.zlqssj"
                        style="width: 100%" value-format="yyyy-MM-dd" :picker-options="pickerOptionstart" ></el-date-picker>
                </el-form-item>
                <el-form-item label="合同到期日期:" style="width: 30%" prop="dqsj">
                    <el-date-picker type="date" placeholder="选择合同到期日期" v-model="projectdetail.zldqsj"
                        style="width: 100%" value-format="yyyy-MM-dd" @focus="pickDateEnd"
                        :picker-options="pickerOptionend" ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item :label="type=='2'?'合同金额:':'月租金'" style="width: 30%" prop="yzj">
                    <el-input v-model="projectdetail.htje" :placeholder="type=='2'?'请输入合同金额':'请输入月租金'" class="search-input" >
                        <template slot="prepend">￥</template>
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item> -->
                <el-form-item label="合同金额:" style="width: 30%" prop="yzj">
                    <el-input v-model="projectdetail.htje" placeholder="请输入合同金额" class="search-input" >
                        <template slot="prepend">￥</template>
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="减免金额:" style="width: 30%" prop="jmje">
                    <el-input v-model="projectdetail.jmje" placeholder="请输入减免金额" class="search-input" >
                        <template slot="prepend">￥</template>
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="减免原因:" style="width: 30%" prop="jmyy">
                    <el-input v-model="projectdetail.jmyy" placeholder="请输入减免原因" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="押金:" style="width: 30%" prop="yj">
                    <el-input v-model="projectdetail.yj" placeholder="请输入押金" class="search-input" >
                        <template slot="prepend">￥</template>
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="出租面积:" style="width: 30%" prop="czmj">
                    <el-input v-model="projectdetail.czmj" placeholder="请输入出租面积" class="search-input" >
                    </el-input>
                </el-form-item>
                <el-form-item label="出租地址:" style="width: 30%" prop="czdz">
                    <el-input v-model="projectdetail.czdz" placeholder="请输入出租地址" class="search-input" >
                    </el-input>
                </el-form-item>
                <el-form-item style="width: 100%" prop="sbqd" label="设备清单:">
                    <el-checkbox-group v-model="sbqd">
                        <el-checkbox label="暖气"></el-checkbox>
                        <el-checkbox label="宽带"></el-checkbox>
                        <el-checkbox label="冰箱"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <!-- <el-button size="small" type="primary" @click="addnewtable" style="margin: 0 auto 10px;">新增</el-button>
                <span style="color: red;margin-left: 10px;font-size: 12px;">点击新增生成新的缴费列表</span> -->
                <!-- -->
                <!-- <el-table :data="tableData" border :header-cell-style="{
                    background: '#f8fbff',
                    color: '#173686',
                    border: '0',
                }" style="width: 100%" size="mini" :row-style="{ height: '20px' }" :cell-style="{ padding: '10px 0' }"
                    show-summary sum-text="合计" :summary-method="getSummaries">
                    <el-table-column prop="year" label="年份" align="center">
                        <template slot-scope="scope">
                            <el-date-picker v-model="scope.row.year" type="year" placeholder="选择年" size="mini"
                                value-format="yyyy" >
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="month" label="月份" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.month" placeholder="请选择月份" size="mini"
                                @change="getmonths(scope.row)" >
                                <el-option v-for="item in monthlist" :key="item.label" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="应缴金额" align="center" prop="yyjje">
                        <template slot-scope="scope">
                            <div class="noBor">
                                <el-input v-model="scope.row.yyjje" placeholder="请输入月租金" size="mini" ></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="减免金额" align="center" prop="jmje">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.jmje" placeholder="请输入减免金额" size="mini" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="应缴金额(减免后)" align="center" prop="yjje">
                        <template slot-scope="scope">
                            {{ scope.row.yjje=scope.row.yyjje - scope.row.jmje }}
                        </template>
                    </el-table-column>
                </el-table> -->
            </el-form>
            <div class="addtitle" style="margin-top: 20px;">办理入住(入住信息)</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top">
                <el-form-item label="水表:" style="width: 30%" prop="shb">
                    <el-input v-model="projectdetail.shb" placeholder="请输入水表" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="电表:" style="width: 30%" prop="db">
                    <el-input v-model="projectdetail.db" placeholder="请输入电表" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="燃气表:" style="width: 30%" prop="rqb">
                    <el-input v-model="projectdetail.rqb" placeholder="请输入燃气表" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="年度供热费:" style="width: 30%" prop="ndgrf">
                    <el-input v-model="projectdetail.ndgrf" placeholder="请输入年度供热费" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item label="物业费:" style="width: 30%" prop="wyf">
                    <el-input v-model="projectdetail.wyf" placeholder="请输入物业费" class="search-input" ></el-input>
                </el-form-item>
                <el-form-item style="width: 30%" prop="wyf"></el-form-item>
                <el-form-item label="设施设备情况:" style="width: 100%" prop="sbqk">
                    <el-input v-model="projectdetail.sbqk" placeholder="请输入设施设备情况" class="search-input" type="textarea" :autosize="{ minRows: 4 }"></el-input>
                </el-form-item>
                <!-- rzfj  -->
                <!-- <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'rzfj') }"
                    :before-remove="beforeRemoves" multiple
                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'rzfj')"
                    :headers="myHeaders" :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload> -->
            </el-form>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;margin: auto;margin-top: 30px">
                <el-tab-pane label="通过" name="first">
                    <table class="table-1">
                        <tr>
                            <td style="text-align: right;font-weight: 700;color: #000;">当前环节:</td>
                            <td colspan="3" style="text-align: left;">{{ detailform.bz }}</td>
                        </tr>
                        <tr style="background-color: #F5FAFA;">
                            <td style="text-align: right;font-weight: 700;color: #000;">步骤:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.nextnodeid" v-if="detailform.ishq == 0">
                                    <el-radio :label="item.id" v-for="(item, index) in detailform.nextnodelist" :key="index"
                                        @change="getry(item)">{{ item.bz }}</el-radio>
                                </el-radio-group>
                                <el-checkbox-group v-model="options" v-else>
                                    <el-checkbox :label="item.id" v-for="(item, index) in detailform.nextnodelist" :key="index"
                                        @change="searchChangeitem(item)">{{ item.bz }}</el-checkbox>
                                </el-checkbox-group>
                            </td>
                        </tr>
                        <tr v-if="detailform.ishq == 0">
                            <td style="text-align: right;font-weight: 700;color: #000;">选择人员:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{ item.name
                                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;font-weight: 700;color: #000;">意见:</td>
                            <td colspan="3">
                                <div style="display: flex;justify-content: space-between;">
                                    <div style="width: 48%;">
                                        <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                            v-model="form.clyj">
                                        </el-input>
                                    </div>
                                    <div class="xzyj">
                                        <div v-for="(item, index) in yjlist" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">{{ item }}</div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        <tr style="background-color: #F5FAFA;">
                            <td colspan="4">
                                <el-button size="mini" type="primary" @click="nextstep">保存</el-button>
                                <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="回退" name="second" :disabled="detailform.isth == 0">
                    <table class="table-1" style="margin-top: 30px;">
                        <tr>
                            <td style="text-align: right;font-weight: 700;color: #000;">当前环节:</td>
                            <td colspan="3" style="text-align: left;">{{ detailform.bz }}</td>
                        </tr>
                        <tr style="background-color: #F5FAFA;">
                            <td style="text-align: right;font-weight: 700;color: #000;">步骤:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.nextnodeid">
                                    <el-radio :label="item.id" v-for="(item, index) in detailform.lastnodelist" :key="index"
                                        @change="getryht(item)">{{ item.bz }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;font-weight: 700;color: #000;">选择人员:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlistht" :key="index">{{ item.name
                                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;font-weight: 700;color: #000;">意见:</td>
                            <td colspan="3">
                                <div style="display: flex;justify-content: space-between;">
                                    <div style="width: 48%;">
                                        <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                            v-model="form.clyj">
                                        </el-input>
                                    </div>
                                    <div class="xzyj">
                                        <div v-for="(item, index) in yjlist" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">{{ item }}</div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        <tr style="background-color: #F5FAFA;">
                            <td colspan="4">
                                <el-button size="mini" type="primary" @click="nextstepht">回退</el-button>
                                <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
            </el-tabs> -->
            <el-table :data="tableData" style="width: 100%;margin: 30px auto 0;" border>
                <el-table-column prop="sssw" label="所属事务名称" align="center"> </el-table-column>
                <el-table-column prop="gwname" label="岗位" align="center"> </el-table-column>
                <el-table-column prop="zjrname" label="转件人" align="center"> </el-table-column>
                <el-table-column prop="zjrq" label="转件日期" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.zjrq ? scope.row.zjrq.split(' ')[0] : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="bz" label="步骤" align="center"> </el-table-column>
                <el-table-column prop="cz" label="操作" align="center"> </el-table-column>
                <el-table-column prop="clyj" label="处理意见" align="center"> </el-table-column>
                <el-table-column prop="zd" label="转到" align="center"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { gdalldetails, signlistadd,gdlccheck,bacasedetails,caselist,dbnum } from '@/api/index';
import global from '@/components/common/httpurl.vue'
export default {
    name: 'htqdadd',
    data() {
        return {
            monthlist: [{ label: '1月', value: '01' }, { label: '2月', value: '02' }, { label: '3月', value: '03' }, { label: '4月', value: '04' }, { label: '5月', value: '05' }, { label: '6月', value: '06' }, { label: '7月', value: '07' }, { label: '8月', value: '08' }, { label: '9月', value: '09' }, { label: '10月', value: '10' }, { label: '11月', value: '11' }, { label: '12月', value: '12' }],
            userlistht: [],
            detailform: {},
            activeName: 'first',
            options: [],//测试
            yjlist: ['同意', '不同意', '同意，请认真办理！', '不同意，请认真复核！', '拟同意，请领导批示！', '请办公室盖章！', '已盖章', '已办理，请归档！'],
            yjdeepcolor: null,
            getsubmit: true,
            httpUrl: global.httpUrl,//公共地址
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            fileList: [],
            tableData: [],//可编辑表格
            projectdetail: {},//楼幢详情
            sbqd: [],//设备清单
            form: {
                clyj: "",//处理意见
                nextnodeid: '',//选择下一步节点id
                selectuser: '',//下一步选择用户id
                zt: '1',
                processtableInfo: {},//流程表单信息 ,
                zjinfoList: [],//租金列表信息
            },
            // 开始时间限制到今年之后
            pickerOptionstart: {
                disabledDate(time) {
                    var year = new Date().getFullYear() - 1
                    console.log(year)
                    console.log(time.getTime())
                    return (
                        time.getTime() < new Date(year + '-12-31').getTime()
                    )
                }
            },
            // 结束时间比开始时间大
            pickerOptionend: {},
            userlist:[],
            type: this.$store.getters.type
        };
    },
    methods: {
        // 时间转换
        stringDateToTimestamp(stringDate) {
            return Date.parse(new Date(stringDate));
        },
        // 获取终止日期
        pickDateEnd() {
            let idStartDate = this.form.qdsj;
            if (!idStartDate) return;
            let that = this;
            that.pickerOptionend = {
                disabledDate(time) {
                    return time.getTime() <= that.stringDateToTimestamp(idStartDate);
                },
            };
        },
        // 创建
        submitForm() {
            this.form.processtableInfo.sbqd = this.sbqd.toString()
            this.form.zjList = this.tableData
            console.log(this.form)
            signlistadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('创建成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('创建失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(fileList)
            console.log('filetype', filetype)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.processtableInfo[filetype] = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists, filetype) {
            console.log(fileLists)
            console.log('filetype', filetype)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.processtableInfo[filetype] = this.fileListshandle.toString()
        },
        // 月份划分(列表数据计算)
        gettime(start, end, myzj, sjjmje) {
            if (start && end) {
                if (myzj) {
                    let ranges = []
                    let [i, j] = [start, end].map(i => new Date(i)).sort((a, b) => a - b)
                    console.log([i, j])
                    while (i <= j) {
                        const ysyf = jfrq//应收月份
                        const jkfs = ''//付款方式
                        const skrq = zzrq//收款日期
                        const id = ''
                        const signid = ''
                        const status_code = '1'
                        const ssje = myzj//实际金额
                        const jmje = sjjmje//减免金额
                        const jfrq = i.toISOString().slice(0, 10)//开始日期
                        const year = jfrq.split('-')[0]//应收年份
                        const month = jfrq.split('-')[1]//应收年月
                        i = new Date(i.getFullYear(), i.getMonth() + 1, 0, i.getHours())
                        const zzrq = new Date(Math.min(+i, +j)).toISOString().slice(0, 10)//终止日期
                        const yyjje = myzj//月应收金额
                        const yjje = myzj - sjjmje//应收金额
                        const jkje = '0'
                        i.setDate(i.getDate() + 1)
                        ranges.push({ year, month, jfrq, yyjje, jmje, yjje, jkje, zzrq, ssje, status_code })
                        // 第一条
                        const firstval = ranges[0]
                        console.log(firstval.zzrq.split('-')[2] - firstval.jfrq.split('-')[2])
                        firstval.ssje = ((firstval.yyjje / (firstval.zzrq.split('-')[2])) * (firstval.zzrq.split('-')[2] - firstval.jfrq.split('-')[2] + 1)).toFixed(2)//数组第一条实际金额
                        console.log(firstval.ssje)
                        firstval.yjje = firstval.ssje - sjjmje//数组第一条应缴金额
                        // 最后一条
                        const lastval = ranges[ranges.length - 1]
                        console.log(lastval.zzrq.split('-')[0])
                        console.log((lastval.zzrq.split('-')[1]) + 1)
                        var d = new Date(lastval.zzrq.split('-')[0], (lastval.zzrq.split('-')[1]), 0);
                        console.log('d', d.getDate(), lastval.yyjje / d)
                        lastval.ssje = ((lastval.yyjje / d.getDate()) * ((lastval.zzrq.split('-')[2]) - (lastval.jfrq.split('-')[2]) + 1)).toFixed(2)//数组最后一条实际金额
                        console.log(lastval.ssje)
                        lastval.yjje = lastval.ssje - sjjmje//数组最后一条应缴金额
                    }
                    this.tableData = ranges
                    this.tableData.map(item => {
                        delete item.ssje
                        delete item.zzrq
                    })
                    this.form.zjsjzq = this.tableData.length
                    this.getsubmit = false//保存可以点击
                    console.log(ranges)
                } else {
                    this.$message.error('请填写每月金额！！')
                }
            } else {
                this.$message.error('请选择开始结束日期！！')
            }

        },
        // 合并计算某一列
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                // 只对amount这一列进行总计核算。
                if (column.property === 'yyjje') {
                    // sums[index] = '---'
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '---'
                    }
                    sums[index] = Number(sums[index]).toFixed(2)
                } else {
                    sums[index] = '---'
                }
                if (column.property === 'yjje') {
                    if (!values.every(value => isNaN(value))) {
                        console.log('应缴金额', values)
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    }
                    sums[index] = Number(sums[index]).toFixed(2)
                }
            });
            console.log('tableData', this.tableData)
            console.log('sums', sums)
            this.form.nzj = sums[4]
            return sums;
        },
        // 归档详情
        gdalldetails(data) {
            gdalldetails(data).then((res) => {
                var that=this
                this.detailform = res.data;//全部数据
                if (res.data.ishq == 0) {
                    if (res.data.nextnodelist.length != 0) {
                        that.form.nextnodeid = res.data.nextnodelist[0].id
                        that.userlist = res.data.nextnodelist[0].userlist
                        that.form.selectuser = that.userlist[0].id
                    }
                }
                this.projectdetail = res.data.processtableInfo;//已录入数据
                this.tableData = res.data.zjinfoList;
                this.form.id = res.data.id;
                if(this.projectdetail.sbqd){
                    this.sbqd=this.projectdetail.sbqd.split(',')
                }
                console.log(res.data)
            });
        },
        // 获取到每一个意见值
        getYjVal(val, i) {
            this.yjdeepcolor = i
            console.log(val)
            this.form.clyj = val
        },
        // 下一步操作按钮
        nextstep() {
            var that = this
            console.log('表格', this.tableData)
            console.log(this.form)
            if (this.detailform.isstartend == 1) {
                this.form.processtableInfo = this.projectdetail;
                this.form.zjinfoList = this.tableData;
                this.form.processtableInfo.sbqd = this.sbqd.toString()
            }
            // 先判断是否会签（会签不用选人员）
            if (this.detailform.ishq == 0) {
                // 判断是否是最后一个节点（最后一个节点不用选人员）
                if (that.detailform.isstartend == 2) {
                    that.gdlccheck(that.form)
                } else {
                    if (that.form.selectuser) {
                        console.log(that.form)
                        that.gdlccheck(that.form)
                    } else {
                        that.$message.error('请选择人员！！！');
                    }
                }
            } else {
                if (this.options.length != 0) {
                    this.form.nextnodeid = this.options.toString()
                    this.gdlccheck(this.form)
                    console.log(this.form)
                } else {
                    this.$message.error('请选择！！')
                }

            }
        },
        // 下一步回退
        nextstepht() {
            this.form.zt = 0
            if (this.form.selectuser) {
                this.gdlccheck(this.form)
            } else {
                this.$message.error('请选择人员！！！');
            }
        },
        // 选项卡
        handleClick() {
            var that = this
            if (this.activeName == 'first') {
                if (this.detailform.ishq == 0) {
                    if (that.detailform.nextnodelist.length != 0) {
                        that.form.nextnodeid = that.detailform.nextnodelist[0].id
                        that.userlist = that.detailform.nextnodelist[0].userlist
                        that.form.selectuser = that.userlist[0].id
                    }
                }
            } else if (this.activeName == 'second') {
                this.form.nextnodeid = this.detailform.lastnodelist[0].id
                this.userlistht = this.detailform.lastnodelist[0].userlist
                this.form.selectuser = this.userlistht[0].id
            }
        },
        // 列表新增一条数据
        addnewtable() {
            let newrow = {
                jfrq: '',
                jkje: 0,
                jmje: 0,
                month: '',
                year: '',
                yjje: 0,
                yyjje: 0,
                status_code: '1'
            }
            this.tableData.push(newrow)
        },
        // 删除表格某一行数据
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        // 获取月份
        getmonths(e) {
            console.log('获取月份', e)
            e.jfrq = e.year+'-'+e.month + '-01'
        },
        // 点击获取人员列表
        getry(val) {
            this.userlist = val.userlist
        },
        // 点击获取人员列表(回退)
        getryht(val) {
            console.log(val)
            this.userlistht = val.userlist
        },
        // 流程审批
        gdlccheck(data) {
            gdlccheck(data).then(res => {
                if (res.code == 200) {
                    this.$message.success('审批通过')
                    let userid = this.$store.getters.userId
                    this.dbnum(userid)
                    this.$router.go(-1);
                }
            })
        },
        // (备案)详情
        bacasedetails(data) {
            bacasedetails(data).then((res) => {
                console.log('res', res)
                this.detailform = res.data;//全部数据
                this.projectdetail = res.data.processtableInfo;//已录入数据
                this.tableData = res.data.nodeList;
                // this.fileform.caseid = res.data.id;
                this.form.id = res.data.id;
                if(this.projectdetail.sbqd){
                    this.sbqd=this.projectdetail.sbqd.split(',')
                }
                console.log(res.data)
                // this.caselist(this.fileform)
            });
        },
        // 流程文件列表
        caselist(data) {
            caselist(data).then(res => {
                this.filetable = res.data
                console.log('filelist', res)
            })
        },
        // 待办数据
        dbnum(data) {
            dbnum(data).then(res => {
                console.log('待办', res)
                this.$store.commit('handledbnum1', res.data.swnum)
                this.$store.commit('handledbnum2', res.data.gdnum)
                this.$store.commit('handledbnum4', res.data.wtswnum)
            })
        },
    },
    created() {
        this.form.relid = this.$route.params.id
        console.log(this.$route.params)
        let data = {
            id: this.$route.params.id
        };
        this.bacasedetails(data);
    }
};
</script>
<style>
/* disabled颜色修改 */
.el-checkbox__input.is-disabled + .el-checkbox__label {
    color: #606266 !important;
}
 
.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
    color: #606266 !important;
}
 
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
    border-color: #606266 !important;
}
 
.el-radio__input.is-disabled + span.el-radio__label {
    color: #606266 !important;
}
 
.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #606266 !important;
}
 
.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #606266 !important;
}
 
.el-input.is-disabled .el-input__inner, textarea:disabled {
    color: #606266 !important;
}
 
.el-range-editor.is-disabled input {
    color: #606266 !important;
}
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>